<template>
    <div style="width: 100%;">
        <div class="header" style="background-color: white">
            <el-page-header @back="goBack" content="公司信息登记">
            </el-page-header>
            <el-divider></el-divider>
        </div>

        <div style="width: 90%;margin: 0 auto">
            <div style="width: 100%;">
                <span style="font-weight: 700;font-size: 20px">|信息登记</span>
            </div>
            <el-divider></el-divider>
            <el-form style="width: 100%;" label-width="120px">
                <el-container>
                    <el-form-item label="公司名称：">
                        <el-input v-model="tenderCompany.companyName" style="width: 500px;"
                                  :disabled="checkId"></el-input>
                    </el-form-item>
                    <el-form-item label="公司地址：">
                        <el-input v-model="tenderCompany.companyAddress" style="width: 500px;"
                                  :disabled="checkId"></el-input>
                    </el-form-item>
                </el-container>
                <el-container>
                    <el-form-item label="公司领导人：">
                        <el-input v-model="tenderCompany.companyLeader" style="width: 500px;"
                                  :disabled="checkId"></el-input>
                    </el-form-item>
                    <el-form-item label="联系方式：">
                        <el-input v-model="tenderCompany.companyTel" style="width: 500px;"
                                  :disabled="checkId"></el-input>
                    </el-form-item>
                </el-container>
                <el-container>
                    <el-form-item label="注册资金：">
                        <el-input type="number" v-model="tenderCompany.registerCapital"
                                  style="width: 500px;" :disabled="checkId"></el-input>
                    </el-form-item>
                    <el-form-item label="注册时间：">
                        <el-date-picker
                                :disabled="checkId"
                                v-model="tenderCompany.createdate"
                                type="date"
                                value-format="yyyy-MM-dd"
                                :pickerOptions="pickerOptions"
                                :clearable="true"
                                style="width: 500px;"
                                placeholder="选择日期">
                        </el-date-picker>
                    </el-form-item>
                </el-container>
                <el-container v-if="!checkId">
                    <el-form-item label="营业执照上传：">
                        <el-upload
                                class="upload-demo"
                                ref="upload"
                                name="multipartfile"
                                action="http://localhost/upload"
                                :headers="{token:this.$store.state.token}"
                                :data="{folder:'tenderCompany'}"
                                :show-file-list="true"
                                :on-success="handleUploadSuccess"
                                :on-change="uploadChange"
                                :limit="1"
                                :auto-upload="false">
                            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                            <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">
                                上传到服务器
                            </el-button>
                        </el-upload>
                    </el-form-item>
                </el-container>
                <el-container>
                    <el-form-item label="营业执照：">
                        <div style="width: 300px;height: 150px;">
                            <img :src="tenderCompany.businessLicense" style="width: 100%;height: 100%;">
                        </div>
                    </el-form-item>
                </el-container>
                <el-container>
                    <el-form-item label="简介：">
                        <el-input
                                :disabled="checkId"
                                v-model="tenderCompany.remark"
                                type="textarea"
                                placeholder="公司简介"
                                style="width: 1100px;"
                                :autosize="{ minRows: 5}"
                        ></el-input>
                    </el-form-item>
                </el-container>
                <el-form-item>
                    <el-button v-if="!checkId" type="primary" @click="handleSubmit">确认提交</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
    import {TenderComapnyService} from "../../../model/gs/TenderComapnyService";

    const tenderCompanyService = TenderComapnyService.getInstance()
    export default {
        props: ['companyId'],
        data() {
            return {
                status: 'add',
                tenderCompany: {
                    businessLicense: 'www',
                    companyName:''
                },
                //时间校验配置
                pickerOptions: {
                    disabledDate(time) {
                        return time.getTime() > Date.now();//设置选择今天之前的日期（不能选择当天时间）
                    }
                }
            }
        },
        methods: {
            handleSubmit() {
                //验证是公司信息是否已经登记过了
                if (this.status == 'add') {
                    tenderCompanyService.register(this.tenderCompany).then(res => {
                        if (res.data.code === 0) {
                            this.$message.success({
                                message: '操作成功',
                                duration: 1000
                            })
                            this.tenderCompany.id = res.data.data.id
                            this.status = 'update'
                        }
                    })
                } else {
                    tenderCompanyService.update(this.tenderCompany).then(res => {
                        if (res.data.code === 0) {
                            this.$message.success({
                                message: '操作成功',
                                duration: 1000
                            })
                        }
                    })
                }
            },
            handleUploadSuccess(response) {
                this.tenderCompany.businessLicense = response.data
            },
            submitUpload() {
                this.$refs.upload.submit()
            },
            getById(id) {
                tenderCompanyService.getById(id).then(response => {
                    if (response.data.code === 0) {
                        this.tenderCompany = response.data.data
                    }
                })
            },
            goBack() {
                if (this.checkId) {
                    this.$emit('back')
                } else {
                    history.back()
                }
            },
            // 方法判断
            uploadChange(file, fileList) {
                // 拿到当前上传图片的name，判断其后缀名是否符合
                let type = this.isImage(file.name);
                this.fileList = fileList;
                let fileLength = this.fileList.length;
                if (!type) {
                    // 若不符合图片类型，则让当前上传的文件去除掉即可，即从上传对列删除本次上传
                    fileList.splice(fileLength - 1, 1);
                    this.$message.error('只允许上传图片');
                }
            },
            // 封装一个判断图片文件后缀名的方法
            isImage(fileName) {
                if (typeof fileName !== 'string') return;
                let name = fileName.toLowerCase();
                return name.endsWith('.png') || name.endsWith('.jpeg') || name.endsWith('.jpg') || name.endsWith('.png') || name.endsWith('.bmp');
            }
        },
        computed: {
            checkId: {
                get() {
                    return this.companyId != '' && this.companyId != null && this.companyId != undefined
                }
            }
        },
        created() {
            if (this.checkId) {
                this.getById(this.companyId)
                return
            }
            //验证是公司信息是否已经登记过了
            tenderCompanyService.isExist().then(response => {
                if (response.data.message != 'register') {
                    this.status = 'update'
                    this.getById(response.data.data)
                }
            })
        }
    }
</script>

<style scoped>

</style>
